<template>
  <div class="app-container">
    <PageSearch :showSearch.sync="showSearch" :getList="getList" :handleQuery="handleQuery" :resetQuery="resetQuery">
      <template #pagination>
        <pagination
          v-show="pageTotal > 0"
          :total="pageTotal"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </template>
      <template #form>
        <el-form :model="queryParams" ref="queryForm" size="small">
          <el-row>
            <el-form-item prop="skuNo">
              <el-input
                v-model="queryParams.skuNo"
                :placeholder="$t('sku编号')"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item prop="">
              <el-input
                v-model="queryParams.spNo"
                :placeholder="$t('库位号')"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <!-- 是否绑定SKU：isBindingSku 0-全部 1-未绑定 2-绑定
              -->
            <el-form-item label-width="120" prop="isBindingSku">
              <el-select :placeholder="$t('是否绑定SKU')" v-model="queryParams.isBindingSku">
                <el-option label="全部" value="0" />
                <el-option label="未绑定" value="1" />
                <el-option label="绑定" value="2" />
              </el-select>
            </el-form-item>
            <el-form-item prop="distrName">
              <el-input
                :placeholder="$t('供应商名称')"
                v-model="queryParams.distrName"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item prop="skuNameCn">
              <el-input
                :placeholder="$t('中文名')"
                v-model="queryParams.skuNameCn"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item prop="skuNameJp">
              <el-input
                :placeholder="$t('日文名')"
                v-model="queryParams.skuNameJp"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label-width="120" prop="isBindingSku">
              <el-select clearable @change="getList" :placeholder="$t('区域')" v-model="queryParams.areaId">
                <el-option
                  v-for="item in filterAreaList"
                  :key="item.id"
                  :label="`${item.areaName}------${item.areaMarkers}`"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-row>
        </el-form>
      </template>
      <template #actions>
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          v-hasPermi="['distribution:stockPosition:edit']"
          @click="handleAdd(true)"
        >
          {{ $t('新增') }}
        </el-button>
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          v-hasPermi="['distribution:stockPosition:export']"
          @click="handleExport"
        >
          {{ $t('导出') }}
        </el-button>

        <el-button type="primary" plain size="mini" @click="handleAreaManage">
          {{ $t('区域管理') }}
        </el-button>
      </template>
    </PageSearch>

    <el-table :height="calTableHeight()" v-loading="loading" ref="TableRef" :data="tableData" row-key="menuId">
      <el-table-column align="center" show-overflow-tooltip prop="spNo" :label="$t('库位号')" width="120">
      </el-table-column>
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="skuNo"
        width="120"
        :label="$t('sku编号')"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <div
            class="SeatNumber"
            @click="
              (event) => {
                aboutSku(event, scope.row)
              }
            "
            :class="SeatNumberactiveid == scope.row.id ? 'SeatNumberactive' : ''"
          >
            {{ scope.row.skuNo }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="areaName" label="区域" width="120"> </el-table-column>
      <!-- 主图 -->
      <el-table-column :label="$t('主图')" prop="imgUrl" align="center">
        <template slot-scope="scope">
          <el-image
            fit="contain"
            :key="Math.random()"
            v-hover="scope.row.imgUrl"
            style="width: 50px; height: 50px"
            :src="scope.row.imgUrl + '?x-oss-process=image/resize,w_100/quality,q_70'"
          />
        </template>
      </el-table-column>

      <el-table-column align="center" show-overflow-tooltip prop="skuNameCn" label="sku中文名" width="120">
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="distrName" label="租户名称" />
      <el-table-column align="center" show-overflow-tooltip prop="distrStock" label="库存总数量">
        <template slot-scope="{ row }">
          <span style="color: rgb(68, 68, 218); cursor: pointer" @click="handleSerialNum(row)">{{
            row.distrStock
          }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="length" label="长" />
      <el-table-column align="center" show-overflow-tooltip prop="width" label="宽" />
      <el-table-column align="center" show-overflow-tooltip prop="height" label="高" />
      <el-table-column align="center" show-overflow-tooltip prop="capacityNum" label="库存容量">
        <template slot-scope="scope">
          <div style="color: blue; cursor: pointer" @click="handleAdd(false, scope.row)">
            {{ scope.row.capacityNum }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="box" label="箱规" />
      <el-table-column align="center" show-overflow-tooltip :label="$t('操作')" :width="calWidth(200, 300, 200)">
        <template slot="header" slot-scope="scope">
          <div>
            {{ $t('操作') }}
            <el-tooltip effect="dark" placement="top-start">
              <div slot="content">
                <p>移库:</p>
                <p>作用是把-个绑定库位的sku移到一个空的库位上，一般用于库位绑定错了或者库存转移移动到垃圾库位:</p>
                <p>作用是让废弃的sku不要占用库位，sku必须是0库存，移除后sku废弃，原来占用的库位空出来</p>
              </div>
              <i style="cursor: pointer" class="el-icon-info"></i>
            </el-tooltip>
          </div>
        </template>
        <template slot-scope="{ row }">
          <!--  -->
          <el-button
            type="text"
            style="margin: 0 5px"
            :disabled="row.skuId == null"
            v-hasPermi="['distribution:stockPosition:moveStockPosition']"
            @click="handleMoveStockPosition(row)"
          >
            移库
          </el-button>
          <!-- 没有配对sku的库位--移动到垃圾库存按钮不显示 -->
          <el-popconfirm
            v-show="row.skuNo"
            icon="el-icon-info"
            icon-color="red"
            :disabled="row.distrStock != 0"
            v-hasPermi="['distribution:stockPosition:moveAbandon']"
            title="确定移动到垃圾库位吗？"
            @confirm="handleMoveAbandon(row)"
          >
            <el-button slot="reference" type="text" :disabled="row.distrStock != 0"> 移动到垃圾库位 </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      :page-sizes="[100, 200, 300, 500]"
      v-show="pageTotal > 0"
      :total="pageTotal"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 申请 -->
    <el-dialog
      :visible.sync="editDialogConfig"
      title="申请数量"
      top="7vh"
      width="600px"
      destroy-on-close
      :modal="true"
      :close-on-click-modal="false"
      class="articleModal"
    >
      <div>
        <el-form ref="elForm" :model="curentData" :rules="curentDataRuler" size="small" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="id" prop="id">
                <el-input disabled v-model="curentData.id" placeholder="请输入id" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="sku_id" prop="skuId">
                <el-input disabled v-model="curentData.skuId" placeholder="请输入id" clearable />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item :label="$t('中文名')" prop="skuNameCn">
                <el-input disabled v-model="curentData.skuNameCn" :placeholder="$t('请输入')" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('日文名')" prop="skuNameJp">
                <el-input disabled v-model="curentData.skuNameJp" :placeholder="$t('请输入')" clearable />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="价格" prop="cloudPrice">
                <el-input disabled v-model="curentData.cloudPrice" placeholder="请输入价格" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="供应商名字" prop="distrName">
                <el-input disabled v-model="curentData.distrName" placeholder="请输入供应商名字" clearable />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="更新日期" prop="updateTime">
                <el-input disabled v-model="curentData.updateTime" placeholder="请输入更新日期" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('备注')" prop="remark">
                <el-input disabled v-model="curentData.remark" placeholder="请输入备注" clearable />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item :label="$t('申请数量')" prop="applyNum">
                <el-input v-model="curentData.applyNum" placeholder="请输入申请数量" clearable />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 图片 -->
    <div class="click-overlay" :style="{ top: clickY + 'px', left: clickX + 'px' }" v-if="aboutSkuList">
      <div class="headeroverlay">
        <div>图片</div>
        <el-input v-model="queryData.skuNo" placeholder="请输入" @input="StockPositionList"></el-input>
        <el-input v-model="queryData.skuNameCn" placeholder="请输入商品中文名" @input="StockPositionList"></el-input>
        <div>规格型号</div>
      </div>
      <div class="clickOverlayContent">
        <div
          @click=";(dangerInfo.newSkuNo = item.skuNo), (dangerForm.targetSkuId = item.id), choseCurentData(item, index)"
          :class="curentDataIndex === index ? 'curentData' : ''"
          v-for="(item, index) in skuDataList"
          :key="index + 'sku'"
          class="listContent"
        >
          <el-image class="skuImage" :src="item.imgUrl"></el-image>

          <div>
            {{ item.skuNo }}
          </div>
          <div>
            {{ item.skuNameCn }}
          </div>
          <div>
            {{ item.specification }}
          </div>
        </div>
      </div>
      <pagination
        :total="queryData.total"
        :pager-count="4"
        :page.sync="queryData.pageNum"
        :limit.sync="queryData.pageSize"
        small
        layout="prev, pager, next"
        @pagination="StockPositionList"
      />
      <div class="overlayFooter">
        <el-button
          size="mini"
          @click="
            () => {
              aboutSkuList = !aboutSkuList
            }
          "
          >关 闭</el-button
        >
      </div>
    </div>

    <!-- 新增/修改 -->
    <el-dialog
      :visible.sync="addInfo.show"
      :title="dataCchangeOrinsert ? '新增' : '修改'"
      top="10vh"
      :before-close="cancelSku"
      width="600px"
      destroy-on-close
      :modal="true"
    >
      <el-form
        :model="addInfo.form"
        :rules="addInfo.rules"
        ref="addForm"
        size="small"
        :inline="true"
        label-width="100px"
      >
        <el-form-item label="区域" prop="areaId">
          <el-select
            style="width: 276px"
            :disabled="!dataCchangeOrinsert"
            v-model="addInfo.form.areaId"
            :placeholder="$t('请选择')"
          >
            <el-option
              v-for="item in filterAreaList"
              :key="item.id"
              :label="`${item.areaName}------${item.areaMarkers}`"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="库位数量" prop="num" v-if="dataCchangeOrinsert">
          <el-input v-model="addInfo.form.num" @input="checkInputValueNum" :disabled="!dataCchangeOrinsert" clearable />
        </el-form-item>
        <el-form-item label="库位号:" prop="spNo" v-else>
          <el-input v-model="addInfo.form.spNo" style="width: 100%" disabled />
        </el-form-item>
        <el-form-item label="库存容量:" prop="capacityNum">
          <el-input v-model="addInfo.form.capacityNum" @input="checkInputValue" style="width: 100%" clearable />
        </el-form-item>
        <el-form-item label="长:" prop="length">
          <el-input v-model="addInfo.form.length" clearable>
            <template #append>cm</template>
          </el-input>
        </el-form-item>
        <el-form-item label="宽:" prop="width">
          <el-input v-model="addInfo.form.width" clearable>
            <template #append>cm</template>
          </el-input>
        </el-form-item>
        <el-form-item label="高:" prop="height">
          <el-input v-model="addInfo.form.height" clearable>
            <template #append>cm</template>
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelSku">取 消</el-button>
        <el-button type="primary" @click="confirmAdd">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 危险弹窗  -->
    <el-dialog
      :visible.sync="showDanger"
      title="新sku绑定,旧sku移库"
      top="20%"
      :before-close="() => (showDanger = false)"
      width="700px"
      :modal="true"
    >
      <div>
        <!--  -->
        <div style="margin: 5px">
          危险操作:<span class="tip">{{ dangerInfo.spNo }}</span
          >该库位已绑定<span class="tip">
            {{ dangerInfo.skuNo }}
          </span>
          是否确认变更?
        </div>
        <!--  -->
        <div style="margin: 5px">
          确认变更:<span class="tip">
            {{ dangerInfo.spNo }}
          </span>
          库位绑定<span class="tip"> {{ dangerInfo.newSkuNo }} </span>
          需要为
          <span class="tip">
            {{ dangerInfo.skuNo }}
          </span>
          分配一个新库位
        </div>

        <div style="margin: 5px">是否确认变更?</div>
      </div>

      <div style="margin: 20px 5px">
        <div class="danger">
          <div class="danger-head">
            <div>库位</div>
            <div>--></div>
            <div>sku</div>
          </div>
          <div class="danger-content">
            <!--  -->
            <div class="danger-content-item">
              <div>{{ dangerInfo.spNo }}</div>
              <div>--></div>
              <div>{{ dangerInfo.skuNo }}</div>
            </div>
            <!--  -->
            <div class="danger-content-item">
              <div>
                <span>新库位</span>
                <el-select
                  filterable
                  style="width: 80%; border: none; margin-left: 10px"
                  v-model="dangerForm.targetSpId"
                >
                  <el-option :label="item.spNo" :key="item.id" :value="item.id" v-for="item in newSpNoList" />
                </el-select>
              </div>
              <div>--></div>
              <div>{{ dangerInfo.newSkuNo }}</div>
            </div>
          </div>
          <div class="danger-code">
            <span>授权码</span>
            <el-input v-model="dangerForm.vcode" style="border: none; margin-left: 10px" />
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="showDanger = false">取 消</el-button>
        <el-button
          v-hasPermi="['distribution:stockPosition:stockPositionBindSkuTransferSp']"
          type="primary"
          @click="handleDanger"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 移库 -->
    <el-dialog
      :visible.sync="moveInfo.show"
      title="移库"
      top="20%"
      :before-close="() => (moveInfo.show = false)"
      width="800px"
      destroy-on-close
      :modal="true"
    >
      <el-input style="margin: 15px 0" clearable placeholder="请输入" v-model="moveInfo.queryParams.spNo">
        <el-button @click="getMoveSpList" slot="append" icon="el-icon-search" />
      </el-input>
      <!--  -->
      <el-table
        :height="600"
        @selection-change="(rows) => (moveInfo.tableCheck = rows)"
        @select="handleMoveSelect"
        :data="moveInfo.data"
        row-key="moveInfomenuId"
        ref="multipleTable"
      >
        <el-table-column align="center" type="selection" width="50" />
        <el-table-column align="center" show-overflow-tooltip prop="spNo" :label="$t('库位号')"> </el-table-column>
      </el-table>
      <pagination
        v-show="moveInfo.total > 0"
        :total="moveInfo.total"
        :page.sync="moveInfo.queryParams.pageNum"
        :limit.sync="moveInfo.queryParams.pageSize"
        @pagination="getMoveSpList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="moveInfo.show = false">取 消</el-button>
        <el-button type="primary" @click="confirmMoveStockPosition"> 确 定 </el-button>
      </div>
    </el-dialog>
    <SerialNum :show.sync="serialNumInfo.show" :formData="serialNumInfo.formData" @getList="getList" />
    <AreaManage :show.sync="areaManage.show" :formData="areaManage.formData" @getList="getList" />
  </div>
</template>

<script>
import {
  queryPageNoSkuList,
  moveStockPosition,
  stockPositionBindSkuTransferSp,
  updateStockPosition,
  insertBatchStockPosition,
  getSkuList,
  getStockPositionList,
  stockPositionBindSku,
  queryNoPageNoSkuList,
  moveAbandon,
  queryById,
  stockPositionAreaListNoPage,
} from '@/api/distribution/sku/inventoryLocationlList'
import calWidth from '@/utils/calWidth'
import SerialNum from '@/components/SerialNum/index.vue'
import { checkPermi } from '@/utils/permission'

import AreaManage from './inventoryLocationlListComponent/areaManage/index.vue'
export default {
  components: {
    SerialNum,
    AreaManage,
  },
  activated() {
    this.$nextTick(() => this.$refs['multipleTable']?.doLayout())
  },
  name: 'InventoryLocationlList',
  data() {
    return {
      filterAreaList: [],
      areaManage: {
        show: false,
        formData: {},
      },
      serialNumInfo: {
        show: false,
        formData: {},
      },
      showSearch: false,
      /**
       * 移库
       */
      moveInfo: {
        show: false,
        total: 0,
        tableCheck: [],
        data: [],
        queryParams: {
          pageSize: 10,
          pageNum: 1,
          spNo: '',
        },

        form: {
          /**源库位ID */
          resourceSpId: '',
          /**	源库位SKU_ID */
          resourceSkuId: '',
          /**目标库位ID */
          targetSpId: '',
        },
      },
      /**危险信息 */
      dangerInfo: {
        skuNo: '',
        newSkuNo: '',
        spNo: '',
      },
      /**危险弹窗 */
      showDanger: false,
      dangerForm: {
        /**源库位ID */
        resourceSpId: '',
        /**源库位SKU_ID */
        resourceSkuId: '',
        /**目标库位ID */
        targetSpId: '',
        /**目标库位SKU_ID */
        targetSkuId: '',
        /**验证码 */
        vcode: '',
      },
      /**新库位列表 */
      newSpNoList: [],
      dangerRules: {
        targetSpId: [{ required: true, message: '请选择', trigger: 'blur' }],
        vcode: [{ required: true, message: '请输入', trigger: 'blur' }],
      },
      curentDataIndex: '',
      dataCchangeOrinsert: true, //true 新增
      skuDataList: [],
      queryData: {
        pageSize: 10,
        pageNum: 1,
        total: 0,
        skuNo: '',
        skuNameCn: '',
      },
      curentSeat: '', // 当前选择的库位号
      clickX: '',
      clickY: '',
      aboutSkuList: false,
      curentData: {
        label: '',
        skuId: '',
        skuNo: '',
        imgUr: '',
        skuNameCn: '',
        skuNameJp: '',
        cloudStock: '',
        cloudPrice: '',
        distrName: '',
        updateTime: '',
        remark: '',
      },
      editDialogConfig: false,
      tableData: [],
      /**数据总条数 */
      pageTotal: 0,
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        isBindingSku: '0',
      },
      SeatNumberactiveid: '',
      curentDataRuler: {
        applyNum: [
          {
            required: true,
            message: '请输入申请数量',
            trigger: 'blur',
          },
        ],
      },
      addInfo: {
        show: false,
        form: {
          num: null,
        },
        rules: {
          areaId: [{ required: true, message: '请选择', trigger: 'blur' }],
          length: [{ required: true, message: '请输入', trigger: 'blur' }],
          width: [{ required: true, message: '请输入', trigger: 'blur' }],
          height: [{ required: true, message: '请输入', trigger: 'blur' }],
          capacityNum: [
            {
              required: true,
              message: '请输入库存容量',
              trigger: 'blur',
            },
          ],
          num: [
            {
              required: true,
              message: '请输入申请数量',
              trigger: 'blur',
            },
          ],
        },
      },
    }
  },
  created() {
    this.getList()
    this.getAreaList()
  },
  watch: {
    aboutSkuList: function (flage) {
      if (!flage) {
        this.SeatNumberactiveid = ''
      } else {
        ;(this.queryData = {
          pageSize: 10,
          pageNum: 1,
          total: 0,
          skuNo: '',
          skuNameCn: '',
        }),
          this.StockPositionList()
      }
    },
    'addInfo.show': function () {
      this.getAreaList()
    },
  },

  methods: {
    getAreaList() {
      stockPositionAreaListNoPage().then((res) => {
        const { code, data, msg } = res
        if (code === 200) {
          this.filterAreaList = data.filter((i) => i.areaMarkers != 'G')
        }
      })
    },
    handleAreaManage() {
      this.areaManage.show = true
    },
    handleSerialNum(row) {
      // skuNo 没有绑定sku编号不能点击弹窗
      if (!row.skuNo) return
      this.serialNumInfo.formData = row
      this.serialNumInfo.show = true
    },
    handleMoveAbandon(row) {
      const data = {
        skuId: row.skuId,
        id: row.id,
        skuNo: row.skuNo,
      }
      moveAbandon(data).then((res) => {
        const { code, data, msg } = res
        if (code === 200) {
          this.$message({ type: 'success', message: msg })

          this.getList()
        }
      })
    },
    handleMoveSelect(selection, row) {
      if (selection.length > 1) {
        this.$message.error('只能选择一个库位')
        this.$refs['multipleTable'].toggleRowSelection(row)
      }
    },
    /**
     * 获取 移库 库位列表
     */
    getMoveSpList() {
      const data = JSON.parse(JSON.stringify(this.moveInfo.queryParams))
      queryPageNoSkuList(data)
        .then((res) => {
          const { code, rows, total } = res
          if (code === 200) {
            this.moveInfo.data = rows
            this.moveInfo.total = total
          }
        })
        .catch((err) => err)
        .finally(() => {})
    },
    handleMoveStockPosition(row) {
      const { skuId, id } = row
      this.moveInfo.form.resourceSpId = id
      this.moveInfo.form.resourceSkuId = skuId
      this.moveInfo.form.targetSpId = ''
      /**重置为1 */
      this.moveInfo.queryParams.pageNum = 1
      /**清空搜索 */
      this.moveInfo.queryParams.spNo = ''
      this.getMoveSpList()
      this.moveInfo.show = true
      console.log(` ==>`, JSON.parse(JSON.stringify(this.moveInfo.form)))
    },
    confirmMoveStockPosition() {
      const tableCheck = JSON.parse(JSON.stringify(this.moveInfo.tableCheck))
      if (tableCheck.length == 0) {
        return this.$message.error('请选择一个库位')
      }
      this.moveInfo.form.targetSpId = tableCheck[0].id
      moveStockPosition(this.moveInfo.form).then((res) => {
        const { code, msg } = res
        if (code === 200) {
          this.$message({ type: 'success', message: msg })

          this.getList()
          this.moveInfo.show = false
        }
      })
    },
    handleExport() {
      this.download(
        'distribution/stockPosition/exportStockPosition',
        {
          ...this.queryParams,
        },
        `exportStockPosition_${new Date().getTime()}.xlsx`,
      )
    },
    checkInputValueNum() {
      const value = this.addInfo.form.num.replace(/[^\d]/g, '')
      const result = parseInt(value, 10)
      if (result > 0) {
        this.addInfo.form.num = result
      } else {
        this.addInfo.form.num = ''
      }
    },
    checkInputValue() {
      const value = this.addInfo.form.capacityNum.replace(/[^\d]/g, '')
      const result = parseInt(value, 10)
      if (result > 0) {
        this.addInfo.form.capacityNum = result
      } else {
        this.addInfo.form.capacityNum = ''
      }
    },
    // 获取修改库位容量数据
    getOledData() {
      this.$refs['addForm'].validate((valid) => {
        if (valid) {
          updateStockPosition(this.addInfo.form).then((res) => {
            if (res.code == 200) {
              this.$message({ type: 'success', message: res.msg })

              this.cancelSku()
              this.getList()
            }
          })
        }
      })
    },
    handleAdd(type, data) {
      this.addInfo.form = {}
      this.dataCchangeOrinsert = type
      this.addInfo.show = true
      if (!this.dataCchangeOrinsert) {
        // this.addInfo.form = JSON.parse(JSON.stringify(data));
        queryById(data.id).then((res) => {
          console.log(`res ==>`, res)
          this.addInfo.form = JSON.parse(JSON.stringify(res.data))
        })
      }
    },

    confirmAdd() {
      if (this.dataCchangeOrinsert == true) {
        this.$refs['addForm'].validate((valid) => {
          if (valid) {
            insertBatchStockPosition(this.addInfo.form).then((res) => {
              const { code, data, msg } = res
              if (code === 200) {
                this.$message({ type: 'success', message: msg })

                this.cancelSku()
                this.getList()
              }
            })
          }
        })
      } else {
        this.getOledData()
      }
    },

    choseCurentData(value, index) {
      let self = this
      this.curentDataIndex = index
      const str = `库位 <strong style="color:red">${this.dangerInfo.spNo}</strong> <strong> --></strong>  sku <strong style="color:red;">${this.dangerInfo.newSkuNo}</strong> 是否绑定?`

      this.$confirm(str, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true,
      })
        .then(() => {
          let pamers = {
            skuId: value.id,
            skuNo: value.skuNo,
            id: this.SeatNumberactiveid,
          }
          stockPositionBindSku(pamers).then((res) => {
            const { code, data, msg } = res
            console.log(`res ==>`, res)
            if (code == 200) {
              this.aboutSkuList = !this.aboutSkuList
              this.getList()
            }
            if (code == 206) {
              console.log(`code ==>`, code)
              queryNoPageNoSkuList().then((res) => {
                this.newSpNoList = res.data
                this.showDanger = true
                this.dangerForm.targetSpId = ''
                this.dangerForm.vcode = ''
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          })
        })
    },
    handleDanger() {
      const data = JSON.parse(JSON.stringify(this.dangerForm))
      if (data.vcode == '' || data.targetSpId == '') {
        return this.$message.error('请完善信息后提交!')
      }
      stockPositionBindSkuTransferSp(data).then((res) => {
        const { code, data, msg } = res
        if (code === 200) {
          this.$message({ type: 'success', message: msg })

          this.showDanger = false
          this.aboutSkuList = false
          this.getList()
        }
      })
    },
    // 获取库位下拉列表
    StockPositionList() {
      getSkuList(this.queryData).then((res) => {
        this.queryData.total = res.total
        this.skuDataList = res.rows
      })
    },
    // 关联sku
    submitFormSku(value) {
      console.log(value)
    },
    // 重置sku
    cancelSku(value) {
      this.addInfo.form.num = null
      this.addInfo.show = false
    },
    aboutSku(event, data) {
      /*****************设置危险信息******************/
      const _data = JSON.parse(JSON.stringify(data))
      this.dangerInfo.skuNo = _data.skuNo
      this.dangerInfo.spNo = _data.spNo

      this.dangerForm.resourceSpId = _data.id
      this.dangerForm.resourceSkuId = _data.skuId
      this.dangerForm.targetSpId = ''
      this.dangerForm.vcode = ''
      console.log(JSON.parse(JSON.stringify(this.dangerForm)))
      /*****************设置危险信息 end******************/

      this.curentDataIndex = ''
      //判断权限
      const flag = checkPermi(['distribution:stockPosition:stockPositionBindSku'])
      if (!flag) return
      this.SeatNumberactiveid = data.id
      this.clickX = event.clientX // 获取鼠标点击位置的横坐标
      if (document.body.clientHeight - event.clientY < 450) {
        this.clickY = event.clientY - 450 // 获取鼠标点击位置的纵坐标
      } else {
        this.clickY = event.clientY // 获取鼠标点击位置的纵坐标
      }
      this.aboutSkuList = !this.aboutSkuList
    },
    // 取消申请
    cancel() {
      this.editDialogConfig = !this.editDialogConfig
    },
    // 提交申请
    submitForm() {
      this.$refs.elForm.validate((valid) => {
        if (valid) {
          this.loading = true
          this.curentData.applyNum = this.curentData.applyNum
          this.curentData.applyPrice = this.curentData.cloudPrice
          this.curentData.applyDistrId = this.curentData.distrId
          skuDistributorSellerApply(this.curentData).then((res) => {
            this.loading = false
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: res.msg,
              })
              this.editDialogConfig = !this.editDialogConfig
              this.getList()
            } else {
              // this.$message({
              //   type: 'error',
              //   message: res.msg,
              // });
              // this.editDialogConfig =!this.editDialogConfig;
            }

            // this.loading = false;
          })
        }
      })
    },
    // 展示申请
    submitFormData(data) {
      this.curentData = data
      this.editDialogConfig = !this.editDialogConfig
    },
    /** 查询菜单列表 */
    getList() {
      this.loading = true
      getStockPositionList({
        ...this.queryParams,
        type: 1,
      }).then((res) => {
        this.tableData = res.rows
        this.pageTotal = res.total
        this.loading = false
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.value1 = null
      Object.keys(this.queryParams).forEach((key) => {
        this.queryParams[key] = null
      })
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10

      this.getList()
    },

    /** 展开/折叠操作 */
    toggleExpandAll() {
      this.refreshTable = false
      this.isExpandAll = !this.isExpandAll
      this.$nextTick(() => {
        this.refreshTable = true
      })
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .el-table__header {
  thead {
    tr {
      th {
        &:nth-child(1) {
          .cell {
            // display: none;
          }
        }
      }
    }
  }
}
.tip {
  font-weight: bold;
  color: red;
}
.listContent:hover {
  cursor: pointer;
  background: rgb(245, 243, 243);
}

.curentData {
  background: gainsboro !important;
}

.listContent {
  padding: 5px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgb(238, 235, 235);
  align-items: center;
  overflow: hidden;

  .skuImage {
    text-align: center;
    width: 100px;
    height: 40px;

    & > .el-image__inner {
      width: auto !important;
    }
  }

  & > :nth-child(2) {
    width: 200px;
    flex: 1;
    text-align: center;
  }

  & > :nth-child(3) {
    width: 200px;
    flex: 1;
    text-align: center;
  }

  & > :nth-child(4) {
    flex: 1;
    height: 36px;
    line-height: 36px;
    text-align: center;
    width: 200px;
    border-radius: 2px;
  }
}

.headeroverlay {
  padding: 5px;
  height: 50px;
  display: flex;

  & > :first-child {
    height: 36px;
    line-height: 36px;
    text-align: center;
    width: 100px;
    border-radius: 2px;
    border: solid 1px gainsboro;
  }

  & > :nth-child(2) {
    width: 200px;
    flex: 1;
  }

  & > :nth-child(3) {
    width: 200px;
    flex: 1;
  }

  & > :nth-child(4) {
    flex: 1;
    height: 36px;
    line-height: 36px;
    text-align: center;
    width: 200px;
    border-radius: 2px;
    border: solid 1px gainsboro;
  }
}

.clickOverlayContent {
  height: calc(85% - 80px);
  overflow-y: scroll;
}

.overlayFooter {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.SeatNumberactive {
  border: solid 1px #1890ff !important;
}

.SeatNumber {
  border-radius: 2px;
  cursor: pointer;
  line-height: 30px;
  height: 30px;
  border: 1px solid gainsboro;
}

.click-overlay {
  padding: 4px;
  position: fixed;
  top: 0;
  left: 0;
  width: 500px;
  height: 450px;
  box-shadow: 4px 4px 16px 8px rgba(0, 0, 0, 0.2);
  background-color: white;
  z-index: 99;
}

.articleModal {
  .el-dialog {
    margin-top: 30vh !important;
  }
}

.goods {
  &-img {
    &-box {
      position: relative;
    }

    &-mini {
      height: 50px;
      border-radius: 3px;

      &:hover {
        & + .goods-img-big {
          display: block;
        }
      }
    }

    &-big {
      // display: none;
      position: absolute;
      z-index: 100;
      top: -180px;
      left: 0;
      transform: translate(0, 70px);
      width: 200px;
      height: 200px;
      border-radius: 3px;
    }
  }
}

.bigImg {
  border-radius: 3px;
  z-index: 10;
  position: fixed;
  width: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.danger {
  $border: 1px solid #ccc;
  $line-height: 40px;
  &-head {
    display: flex;
    line-height: $line-height;
    border: $border;
    div {
      display: flex;
      align-items: center;
      justify-content: center;
      &:not(:nth-child(2)) {
        flex: 1;
      }

      &:nth-child(2) {
        width: 50px;
        border-right: $border;
        border-left: $border;
      }
    }
  }
  &-content {
    border: $border;
    border-top: none;
    &-item {
      display: flex;
      line-height: $line-height;
      &:nth-child(1) {
        border-bottom: $border;
      }
      div {
        display: flex;
        align-items: center;
        justify-content: center;
        &:not(:nth-child(2)) {
          flex: 1;
        }

        &:nth-child(2) {
          width: 50px;
          border-right: $border;
          border-left: $border;
        }
      }
    }
  }
  &-code {
    border: $border;
    border-top: none;
    display: flex;
    align-items: center;
    padding: 5px;
    span {
      white-space: nowrap;
    }
  }
}
</style>
